<template>
  <view class="publish-container">
    <!-- 发布类型选择 -->
    <view class="publish-type">
      <view 
        class="type-item" 
        v-for="(item, index) in publishTypes" 
        :key="index"
        @tap="selectType(item)"
      >
        <image :src="item.icon" mode="aspectFit"></image>
        <text>{{ item.name }}</text>
      </view>
    </view>
    
    <!-- 发布表单 -->
    <view class="publish-form" v-if="selectedType">
      <view class="form-item">
        <text class="label">标题</text>
        <input type="text" v-model="formData.title" placeholder="请输入标题" />
      </view>
      
      <view class="form-item">
        <text class="label">分类</text>
        <picker 
          mode="selector" 
          :range="categories" 
          range-key="name"
          @change="categoryChange"
        >
          <view class="picker">
            {{ formData.category ? formData.category.name : '请选择分类' }}
          </view>
        </picker>
      </view>
      
      <view class="form-item">
        <text class="label">价格</text>
        <input type="digit" v-model="formData.price" placeholder="请输入价格" />
      </view>
      
      <view class="form-item">
        <text class="label">描述</text>
        <textarea v-model="formData.description" placeholder="请详细描述您要发布的信息" />
      </view>
      
      <view class="form-item">
        <text class="label">图片</text>
        <view class="image-uploader">
          <view 
            class="image-item" 
            v-for="(item, index) in formData.images" 
            :key="index"
          >
            <image :src="item" mode="aspectFill"></image>
            <text class="delete-btn" @tap="deleteImage(index)">×</text>
          </view>
          <view class="upload-btn" @tap="chooseImage" v-if="formData.images.length < 9">
            <text>+</text>
          </view>
        </view>
      </view>
      
      <view class="form-item">
        <text class="label">视频</text>
        <view class="video-uploader">
          <view class="video-item" v-if="formData.video">
            <video :src="formData.video"></video>
            <text class="delete-btn" @tap="deleteVideo">×</text>
          </view>
          <view class="upload-btn" @tap="chooseVideo" v-else>
            <text>+</text>
            <text class="upload-text">上传视频</text>
          </view>
        </view>
      </view>
      
      <view class="form-item">
        <text class="label">联系方式</text>
        <input type="text" v-model="formData.contact" placeholder="请输入联系方式" />
      </view>
      
      <template v-if="selectedType?.name === '房屋出租'">
        <view class="form-item">
          <text class="label">详细地址</text>
          <view class="address-section">
            <view class="location-picker" @tap="chooseLocation">
              <text>{{ formData.address.name || '点击选择位置' }}</text>
            </view>
            <input 
              type="text" 
              v-model="formData.address.detail" 
              placeholder="请输入详细地址(门牌号等)" 
            />
          </view>
        </view>
      </template>
      
      <button class="submit-btn" @tap="submitForm">发布信息</button>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue'

const publishTypes = ref([
  { 
    name: '二手闲置', 
    icon: 'https://img.58cdn.com.cn/weixin/r/main/ershou.png'
  },
  { 
    name: '房屋出租', 
    icon: 'https://img.58cdn.com.cn/weixin/r/main/house.png'
  },
  { 
    name: '招聘求职', 
    icon: 'https://img.58cdn.com.cn/weixin/r/main/job.png'
  },
  { 
    name: '本地服务', 
    icon: 'https://img.58cdn.com.cn/weixin/r/main/service.png'
  }
])

const selectedType = ref(null)
const categories = ref([])

const formData = reactive({
  title: '',
  category: null,
  price: '',
  description: '',
  images: [],
  contact: '',
  video: '',
  address: {
    name: '',
    latitude: '',
    longitude: '',
    detail: ''
  }
})

const selectType = (type) => {
  selectedType.value = type
  // 根据类型加载对应的分类
  loadCategories(type)
}

const loadCategories = (type) => {
  // 模拟加载分类数据
  categories.value = [
    { id: 1, name: '家具' },
    { id: 2, name: '电器' },
    { id: 3, name: '数码' }
  ]
}

const categoryChange = (e) => {
  formData.category = categories.value[e.detail.value]
}

const chooseImage = () => {
  uni.chooseImage({
    count: 9 - formData.images.length,
    success: (res) => {
      formData.images.push(...res.tempFilePaths)
    }
  })
}

const deleteImage = (index) => {
  formData.images.splice(index, 1)
}

const chooseVideo = () => {
  uni.chooseVideo({
    count: 1,
    success: (res) => {
      formData.video = res.tempFilePath
    }
  })
}

const deleteVideo = () => {
  formData.video = ''
}

const chooseLocation = () => {
  uni.chooseLocation({
    success: (res) => {
      formData.address.name = res.name
      formData.address.latitude = res.latitude
      formData.address.longitude = res.longitude
    }
  })
}

const submitForm = () => {
  // 表单验证
  if (!formData.title) {
    uni.showToast({ title: '请输入标题', icon: 'none' })
    return
  }
  // 提交表单
  console.log('提交表单', formData)
  uni.showLoading({ title: '发布中...' })
  // 模拟提交
  setTimeout(() => {
    uni.hideLoading()
    uni.showToast({ title: '发布成功' })
    // 重置表单
    Object.assign(formData, {
      title: '',
      category: null,
      price: '',
      description: '',
      images: [],
      contact: '',
      video: '',
      address: {
        name: '',
        latitude: '',
        longitude: '',
        detail: ''
      }
    })
    selectedType.value = null
  }, 1500)
}
</script>

<style scoped>
.publish-container {
  padding: 20rpx;
}

.publish-type {
  display: flex;
  flex-wrap: wrap;
  padding: 20rpx 0;
}

.type-item {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx 0;
}

.type-item image {
  width: 80rpx;
  height: 80rpx;
  margin-bottom: 10rpx;
}

.type-item text {
  font-size: 24rpx;
}

.publish-form {
  margin-top: 20rpx;
}

.form-item {
  margin-bottom: 30rpx;
}

.label {
  display: block;
  margin-bottom: 10rpx;
  font-size: 28rpx;
  color: #333;
}

input, .picker {
  width: 100%;
  height: 80rpx;
  border: 1rpx solid #eee;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
}

textarea {
  width: 100%;
  height: 200rpx;
  border: 1rpx solid #eee;
  border-radius: 8rpx;
  padding: 20rpx;
  font-size: 28rpx;
}

.image-uploader {
  display: flex;
  flex-wrap: wrap;
}

.image-item {
  width: 200rpx;
  height: 200rpx;
  margin-right: 20rpx;
  margin-bottom: 20rpx;
  position: relative;
}

.image-item image {
  width: 100%;
  height: 100%;
  border-radius: 8rpx;
}

.delete-btn {
  position: absolute;
  right: -10rpx;
  top: -10rpx;
  width: 40rpx;
  height: 40rpx;
  line-height: 40rpx;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  border-radius: 50%;
}

.upload-btn {
  width: 200rpx;
  height: 200rpx;
  border: 1rpx dashed #ddd;
  border-radius: 8rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 60rpx;
  color: #999;
}

.submit-btn {
  margin-top: 40rpx;
  background-color: #f56c6c;
  color: #fff;
}

/* 视频上传样式 */
.video-uploader {
  margin-top: 10rpx;
}

.video-item {
  width: 400rpx;
  height: 300rpx;
  position: relative;
}

.video-item video {
  width: 100%;
  height: 100%;
  border-radius: 8rpx;
}

/* 地址选择样式 */
.address-section {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.location-picker {
  width: 100%;
  height: 80rpx;
  border: 1rpx solid #eee;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  background-color: #f8f8f8;
}

.upload-text {
  font-size: 24rpx;
  margin-top: 10rpx;
}
</style> 